import { Image } from "antd";
import { PageContainer } from "@ant-design/pro-layout";
import ProForm, {
  ProFormSelect,
  ProFormText,
  ProFormDigit,
  ProFormRadio,
  ProFormDependency,
} from "@ant-design/pro-form";
import useCommonTable from "@/hooks/useCommonTable";

import { fetchList, add, update, remove } from "@/api/health";
import UploadFile from "@/components/UploadFile";
import { healthTypeOptions, freeTypeOptions } from "@/const";
import Editor from "@/components/Editor";

export default () => {
  const columns = [
    {
      title: "类型",
      dataIndex: "type",
      valueType: "select",
      fieldProps: {
        options: healthTypeOptions,
      },
    },
    {
      title: "名称",
      dataIndex: "name",
      search: false,
    },
    {
      title: "排序",
      dataIndex: "sortNum",
      search: false,
      width: 100,
    },
    {
      title: "封面",
      dataIndex: "cover",
      search: false,
      render: (_, record) => {
        return <Image width={80} height={80} src={record.cover} />;
      },
    },
    {
      title: "金额",
      dataIndex: "price",
      search: false,
      render: (_, record) => {
        return record.free === 1 ? "免费" : record.price;
      },
    },
  ];

  const renderFormItem = ({ type, formRef }) => {
    return (
      <>
        <ProFormSelect
          name="type"
          label="类型"
          allowClear
          fieldProps={{
            options: healthTypeOptions,
          }}
          rules={[{ required: true, message: "请选择类型" }]}
        />
        <ProFormText
          label="名称"
          name="name"
          rules={[
            { required: true, message: "请输入名称" },
            {
              max: 200,
              message: "最长为200位",
            },
          ]}
        />
        <ProFormDigit
          label="排序"
          name="sortNum"
          placeholder="请输入排序"
          min={1}
          rules={[{ required: true, message: "请输入排序" }]}
        />
        <ProFormRadio.Group
          label="金额"
          name="free"
          options={freeTypeOptions}
          rules={[{ required: true, message: "请选择" }]}
        />

        <ProFormDependency name={["free"]}>
          {({ free }) => {
            return (
              free === 0 && (
                <ProFormDigit
                  label="金额"
                  name="price"
                  placeholder="请输入金额"
                  fieldProps={{
                    precision: 2,
                  }}
                  rules={[{ required: true, message: "请输入金额" }]}
                />
              )
            );
          }}
        </ProFormDependency>

        <ProForm.Item
          name="cover"
          label="封面"
          tooltip="建议尺寸：702*360"
          rules={[{ required: true, message: "请上传封面" }]}
        >
          <UploadFile />
        </ProForm.Item>

        <ProForm.Item name="content" label="详情">
          <Editor />
        </ProForm.Item>
      </>
    );
  };

  return (
    <PageContainer>
      {useCommonTable({
        title: "",
        columns,
        renderFormItem,
        modalWidth: 1000,
        fetchList,
        add,
        update,
        remove,
        actionColumnWidth: 200,
        showCheckbox: false,
        layout: "horizontal",
        transformGetData: (record) => {
          return {
            ...record,
            detailImg: record?.detailImg?.map((item) => {
              return {
                url: item,
              };
            }),
          };
        },
        transformPostData: (values) => {
          return {
            ...values,
            detailImg: values?.detailImg?.map((item) => item.url),
          };
        },
      })}
    </PageContainer>
  );
};
